import {NgModule} from '@angular/core';
//  会导入 RouterModule 和 Routes，以便该应用具有路由功能
import {RouterModule, Routes} from '@angular/router';
import {HeroesComponent} from "./heroes/heroes.component";
import {DashboardComponent} from "./dashboard/dashboard.component";
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
// Routes 告诉路由器，当用户单击链接或将 URL 粘贴进浏览器地址栏时要显示哪个视图。
const routes: Routes = [

  // 配置好路由后，接着导入 HeroesComponent，它将告诉路由器要去什么地方。
  /**
   * path
   * 用来匹配浏览器地址栏中 URL 的字符串。
   *
   * component
   * 导航到该路由时，路由器应该创建的组件
   *  localhost:4200/heroes
   */
  // 这个路由会把一个与空路径“完全匹配”的 URL 重定向到路径为 '/dashboard' 的路由
  {path:'',redirectTo:'/dashboard',pathMatch:"full"},
  {path: 'heroes', component: HeroesComponent},
  { path: 'detail/:id', component: HeroDetailComponent },
  {path:'dashboard',component:DashboardComponent},
];

// @NgModule 元数据会初始化路由器，并开始监听浏览器地址的变化
/**
 * 将 RouterModule 添加到 AppRoutingModule 的 imports 数组中
 * 同时通过调用 RouterModule.forRoot() 来用这些 routes 配置它
 *
 * 这个方法之所以叫 forRoot()，是因为你要在应用的顶层配置这个路由器
 * forRoot() 方法会提供路由所需的服务提供者和指令，还会基于浏览器的当前 URL 执行首次导航
 */

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  // AppRoutingModule 导出 RouterModule，以便它在整个应用程序中生效
  exports: [RouterModule]
})
export class AppRoutingModule {
}
